<template>
  <div class="app-container">
    <el-tabs ref="tabs" v-model="activeName">
      <el-tab-pane name="first">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="assessInfoParam.assessName" placeholder="根据方案名称查询"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getAssessInfoList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetAssessParam" type="warning">重置</el-button>
          </el-form-item>
        </el-form>
        <el-tabs @tab-click="getAssessInfoList" v-model="assessInfoParam.status" type="border-card">
          <el-tab-pane name="0" label="待处理">
            <el-table :data="assessInfoList" style="width: 100%">
              <el-table-column align="center" prop="assessName" label="方案名称"></el-table-column>
              <el-table-column align="center" prop="assessPeriod" label="考核周期"></el-table-column>
              <el-table-column align="center" prop="assessDeadline" label="截至时间">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.assessDeadline, '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" label="处理状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                  <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button @click="changeAssessEmp(scope.row.id)" type="text">查看考核人员</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="assessInfoTotal>0"
              :total="assessInfoTotal"
              :page.sync="assessInfoParam.pageNum"
              :limit.sync="assessInfoParam.pageSize"
              @pagination="getBackAssessInfoList()"
            />
          </el-tab-pane>
          <el-tab-pane name="1" label="已处理">
            <el-table :data="assessInfoList" style="width: 100%">
              <el-table-column align="center" prop="assessName" label="方案名称"></el-table-column>
              <el-table-column align="center" prop="assessPeriod" label="考核周期"></el-table-column>
              <el-table-column align="center" prop="assessDeadline" label="截至时间">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.assessDeadline, '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" label="处理状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                  <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                  <el-tag v-if="scope.row.status === '2'" type="warning">已驳回</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button @click="changeAssessEmp(scope.row.id)" type="text">查看考核人员</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="assessInfoTotal>0"
              :total="assessInfoTotal"
              :page.sync="assessInfoParam.pageNum"
              :limit.sync="assessInfoParam.pageSize"
              @pagination="getAssessInfoList()"
            />
          </el-tab-pane>
          <el-tab-pane name="2" label="已驳回">
            <el-table :data="assessInfoList" style="width: 100%">
              <el-table-column align="center" prop="assessName" label="方案名称"></el-table-column>
              <el-table-column align="center" prop="assessPeriod" label="考核周期"></el-table-column>
              <el-table-column align="center" prop="assessDeadline" label="截至时间">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.assessDeadline, '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" label="处理状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                  <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                  <el-tag v-if="scope.row.status === '2'" type="warning">已驳回</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button @click="changeAssessEmp(scope.row.id)" type="text">查看考核人员</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="assessInfoTotal>0"
              :total="assessInfoTotal"
              :page.sync="assessInfoParam.pageNum"
              :limit.sync="assessInfoParam.pageSize"
              @pagination="getBackAssessInfoList()"
            />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane name="second">
        <div>
          <el-button style="float: left;margin-right: 30px" @click="goBack()">返回</el-button>
          <div style="float: left">
            <el-form :model="assessEmpParam" :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="assessEmpParam.nickName" placeholder="根据姓名查询"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="changeAssessEmp(assessEmpParam.aid)" type="primary">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="warning">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="float: right">
            <el-button  type="text" @click="excelAssess" style="margin-right: 30px">导出</el-button>

            <el-upload style="float: right" action="111" accept=".xlsx"
                       :on-success="handleExcelUpload" :before-upload="beforeExcelUpload">
              <el-button type="success">考核导入<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-upload>
          </div>
        </div>
        <section>
          <el-table
            :data="assessEmpList"
            :span-method="objectSpanMethod"
            border
            :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
            style="width: 100%">
            <el-table-column align="center" prop="nickName" label="姓名"></el-table-column>
            <el-table-column align="center" prop="jobNo" label="工号"></el-table-column>
            <el-table-column align="center" prop="assessPeriod" label="考核周期"></el-table-column>
            <el-table-column align="center" prop="assessDeadline" label="截至时间">
              <template slot-scope="scope">
                {{ parseTime(scope.row.assessDeadline, '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="targetLabel" label="指标名称"></el-table-column>
            <el-table-column align="center" prop="weight" label="权重">
              <template slot-scope="scope">
                {{ scope.row.weight + '%' }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="score" label="评分">
              <template slot-scope="scope">
                <span v-if="scope.row.score === null">未评分</span>
                <span v-if="scope.row.score !== null">{{ scope.row.score }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="处理状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                <el-tag v-if="scope.row.status === '2'" type="warning">已驳回</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" width="250" label="操作">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status === '0'|| scope.row.status === '2'" type="text">编辑</el-button>
                <el-button v-if="scope.row.status === '0'|| scope.row.status === '2'" @click="assessment(scope.row)"
                           type="text">评估绩效
                </el-button>
                <el-button @click="empInfoFlow(scope.row)" type="text">查看流程</el-button>
                <el-button v-if="scope.row.status === '1' || scope.row.status === '2'" @click="changeCause(scope.row)"
                           type="text">原因
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </section>
        <el-dialog
          title="驳回原因"
          :visible.sync="causeVisible"
          width="30%">
          <span>{{ cause }}</span>
          <span slot="footer" class="dialog-footer">
          <el-button @click="causeVisible = false">关闭</el-button>
         </span>
        </el-dialog>
        <el-dialog title="考核流程" :visible.sync="centerDialogVisible" width="40%" center>
          <div style="height: 300px;">
            <el-steps direction="vertical" finish-status="success" :active="active">
              <el-step :title="createData.createBy +' ' +'发起考核'"
                       :description="
                     parseTime(createData.createTime, '{y}-{m}-{d}')"
              ></el-step>
              <el-step :title="activity.nickName +'  '+ activity.assessFlow"
                       :description="
                     parseTime(activity.updateTime, '{y}-{m}-{d}')"
                       v-for="(activity, index) in activities">
              </el-step>
            </el-steps>
          </div>
          <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <pagination
          v-show="assessEmpTotal>0"
          :total="assessEmpTotal"
          :page.sync="assessEmpParam.pageNum"
          :limit.sync="assessEmpParam.pageSize"
          @pagination="changeAssessEmp(assessEmpParam.aid)"
        />
      </el-tab-pane>
      <el-tab-pane name="third">
        <div v-if="scoreForm.assessmentEmpList.length > 0">
          <el-button style="float: left;margin-right: 30px" @click="goSecond()">返回</el-button>
          <div style="margin-left: 100px">
            <h2>考核评分</h2>
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: center">
              <center>
                <el-descriptions style="float: left" :column="4">
                  <el-descriptions-item label="姓名">
                    {{ scoreForm.assessmentEmpList[0].empName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="工号">
                    {{ scoreForm.assessmentEmpList[0].jobNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核周期">
                    {{ scoreForm.assessmentEmpList[0].assessPeriod }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核方案">
                    {{ scoreForm.assessmentEmpList[0].assessTemName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="部门">
                    {{ scoreForm.assessmentEmpList[0].deptName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="岗位">
                    {{ scoreForm.assessmentEmpList[0].stationName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核名称">
                    {{ scoreForm.assessmentEmpList[0].assessName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核结束时间">
                    {{ scoreForm.assessmentEmpList[0].assessDeadline }}
                  </el-descriptions-item>
                </el-descriptions>
              </center>
            </div>
            <el-form ref="scoreForm" :model="scoreForm" :inline="true" class="demo-form-inline">
              <el-table
                border
                :data="scoreForm.assessmentEmpList"
                style="width: 100%">
                <el-table-column align="center" prop="targetLabel" label="指标名称"></el-table-column>
                <el-table-column align="center" prop="weight" label="指标权重">
                  <template slot-scope="scope">{{ scope.row.weight + ' %' }}</template>
                </el-table-column>
                <el-table-column align="center" prop="scoreCeiling" label="评分上限"></el-table-column>
                <el-table-column align="center" prop="assessCriterion" label="考核标准"></el-table-column>
                <el-table-column align="center" prop="score" label="评分">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status === '1'">
                      {{ scope.row.score }}
                    </span>
                    <el-form-item v-if="scope.row.status === '0' || scope.row.status === '2'"
                                  :prop="`assessmentEmpList.${scope.$index}.score`">
                      <el-input-number v-model="scope.row.score"
                                       :controls="false" :precision="2" :step="0.1"
                                       :max="scope.row.scoreCeiling"></el-input-number>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="calculate" label="得分">
                  <template slot-scope="scope">
                    <span v-if="scope.row.score !== null">{{
                        scope.row.calculate = (((scope.row.score / scope.row.scoreCeiling) * 10 * (scope.row.weight / 100)).toFixed(2))
                      }}</span>
                    <span v-if="scope.row.score === null">未评分</span>
                  </template>
                </el-table-column>
              </el-table>

            </el-form>
          </el-card>
          <div style="margin-top: 300px;margin-left: 650px">
            <el-button>取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import {
  getAssessInfoList,
  changeAssessEmp,
  assessmentEmp,
  updateAssessEmp,
  excelImport
} from '@/api/system/performanceAssess'
import Template from "@/views/system/email/ItoTemplate";
import {
  getCauseByEid
} from '@/api/system/record'
import {
  getEmpInfoFlow,
} from '@/api/system/assessInfo'

export default {
  name: "performanceAssess",
  components: {Template},
  data() {
    return {
      assessInfoParam: {
        assessName: '',
        status: 0,
        pageNum: 1,
        pageSize: 10
      },
      assessEmpParam: {
        aid: undefined,
        nickName: '',
        status: 0,
        pageNum: 1,
        pageSize: 10
      },
      scoreForm: {
        assessmentEmpList: []
      },
      assessInfoTotal: 0,
      assessEmpTotal: 0,
      assessInfoList: [],
      assessEmpList: [],
      activeName: 'first',
      spanArr: [], //存储合并单元格的开始位置
      testPosition: 0,
      aid: 0,
      score: 0.00,
      createData: {},
      activities: [],
      active: 0,
      centerDialogVisible: false,
      cause: '',
      causeVisible: false,
      uploadForm: {}
    }
  },
  mounted() {
    //tab标签的权限控制
    this.$nextTick(() => {
      //首先把所有的都隐藏
      this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
      this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
      this.$refs.tabs.$children[0].$refs.tabs[2].style.display = 'none';
    });
  },
  created() {
    this.getAssessInfoList()
  },
  methods: {
    excelAssess() {
      this.download('/system/performanceAssess/export', {
        ...this.assessEmpParam
      }, `绩效评估表_${new Date().getTime()}.xlsx`)
    },
    handleExcelUpload(res, file) {

    },
    beforeExcelUpload(file) {
      if (file != null) {
        let formData = new FormData();
        formData.append('file', file)
        const loading = this.$loading({
          lock: true,
          text: '正在导入评分，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        excelImport(formData).then(res => {
          loading.close();
          this.$message({
            type: 'success',
            message: '已保存'
          });
          this.goBack()
        }).catch(e => {
          loading.close();
        })
      }
      return false;
    },
    changeCause(row) {
      getCauseByEid(row.eid).then(res => {
        this.cause = res.msg
        this.causeVisible = true
      })
    },
    rowspan(spanArr, position, spanName) {
      this.assessEmpList.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
          if (
            this.assessEmpList[index][spanName] ===
            this.assessEmpList[index - 1][spanName]
          ) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 7) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }

    },
    goBack() {
      this.activeName = 'first'
      this.spanArr = []
      this.testPosition = 0
      this.getAssessInfoList()
    },
    goSecond() {
      this.activeName = 'second'
    },
    empInfoFlow(row) {
      console.log(row)
      this.centerDialogVisible = true
      getEmpInfoFlow(row.aid, row.uid).then(res => {
        console.log(res)
        this.createData.createTime = res.data[0].createTime
        this.createData.createBy = res.data[0].createBy
        this.activities = res.data
        res.data.map(r => {
          if (res.data[0].status === '0') {
            this.active = 1
            return;
          } else if (r.status === '1') {
            this.active = r.sequence + 1
          }
        })
      })
    },
    onSubmit() {
      this.$refs["scoreForm"].validate(valid => {
        if (valid) {
          this.$confirm('是否确认保存本次评分', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            updateAssessEmp(this.scoreForm.assessmentEmpList).then(res => {
              this.$message({
                type: 'success',
                message: '已保存!'
              });
              this.changeAssessEmp(res.data.aid)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '以取消保存'
            });
          });

        }
      })
    },
    assessment(row) {
      assessmentEmp(row.aid, row.uid).then(res => {
        this.scoreForm.assessmentEmpList = res.data
        this.activeName = 'third'
      })
    },
    getAssessInfoList() {
      getAssessInfoList(this.assessInfoParam).then(res => {
        this.assessInfoList = res.rows
        this.assessInfoTotal = res.total
        if (this.assessInfoList.length > 0) {
          this.aid = this.assessInfoList[0].aid
        }
      })
    },
    resetAssessParam() {
      this.assessInfoParam.assessName = ''
      this.getAssessInfoList()
    },
    getBackAssessInfoList() {
      this.getAssessInfoList()
    },
    changeAssessEmp(aid) {
      console.log(aid)
      this.assessEmpParam.aid = aid
      changeAssessEmp(this.assessEmpParam).then(res => {
        this.assessEmpList = res.rows
        this.assessEmpTotal = res.total
        this.spanArr = []
        this.testPosition = 0
        this.rowspan(this.spanArr, this.testPosition, "uid");
        this.activeName = 'second'
      })
    }
  },
}
</script>

<style scoped>
/* 利用穿透，设置input边框隐藏 */
.TargetInput >>> .el-input__inner {
  border: 0;
}

/* 如果你的 el-input type 设置成textarea ，就要用这个了 */
.TargetInput >>> .el-textarea__inner {
  border: 0;
  resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}
</style>
